<template>
  <div class="login">
    <div class="box">
      <img class="logo" src="../../assets/bxImg/login/logo.png" alt="">
      <p class="hy">欢迎登录</p>
      <!-- 表单 -->
      <div class="form">
        <el-form :model="form" :rules="form.rules" ref="form" label-width="100px" class="demo-ruleForm">
          <!-- 账号 -->
          <el-form-item class="ipt" prop="name">
            <div class="namediv">
              <img class="nameimg" src="../../assets/bxImg/login/name.png" alt="">
              <el-input class="nameipt" placeholder="请输入账号(1~10)" v-model="form.name"></el-input>
            </div>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item class="ipt" prop="pass">
            <div class="namediv">
              <img class="nameimg1" src="../../assets/bxImg/login/pass.png" alt="">
              <el-input type="password" show-password class="nameipt" placeholder="请输入密码(3~6)"
                v-model="form.pass"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <el-checkbox>记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>
<script>
import { getLoginBx } from "../../utils/api"
export default {
  name: "Login",
  data() {
    return {
      form: {
        name: '',
        pass: '',
        checked: false,
        rules: {
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ],
        }
      },
      users: []
    }
  },
  created() {
    getLoginBx().then(res => {
      // console.log(res);
      this.users = res.data.data
    })
  },
  methods: {
    // 登录
    onSubmit() {
      // 做验证
      if ((this.form.name.length >= 1 && this.form.name.length < 11) && (this.form.pass.length >= 3 && this.form.pass.length < 7)) {
        // 判断用户是否在表中
        const uFlag = this.users.some(item => {
          if (item.name == this.form.name) {
            return true
          }
          return
        })
        // 如果在表中，判断密码是否匹配
        if (uFlag) {
          // 提取出当前用户
          const currentUser = this.users.find(item => {
            return item.name == this.form.name
          })
          // 密码正确，登录成功
          if (this.form.pass == currentUser.password) {
            if(JSON.parse(currentUser.active) == 1){
              this.$message({
              showClose: true,
              message: '欢迎使用极致瑞成后台管理系统(V1.2)',
              type: 'success'
            });
            // 存本地用户信息+token
            localStorage.setItem('user', JSON.stringify(currentUser))
            localStorage.setItem('token', JSON.stringify(currentUser.id))
            // 跳转到首页
            this.$router.push('/home');
            }else{
              this.$message.error('您的账号已被禁用');
            }
           
          } else {
            this.$message({
              showClose: true,
              message: '密码错误,请检查密码并重新输入',
              type: 'error'
            });
            this.form.pass=''
          }
        } else {
          this.$message({
              showClose: true,
              message: '您输入的账号不存在,请重新输入',
              type: 'error'
            });
            this.form.name=''
        }
      }
    }
  }

}
</script>
<style scoped >
.btn {
  width: 284px;
  height: 45px;
  margin-left: -100px;
  border: none;
  background-color: #3A62D7;
  color: #fff;
}

.namediv {
  display: flex;
  height: 40px;
  border-bottom: 1.5px solid #fff;
  margin-left: -90px;
  margin-right: 10px;
}

.el-checkbox {
  margin-left: -302px;
  color: #fff;

}

.form {
  margin-top: 20px;
}

.nameimg {
  width: 30px;
  height: 30px;
}

.nameimg1 {
  width: 28px;
  height: 28px;
}

.ipt {
  /deep/ * {
    color: #fff;
    background-color: rgba(250, 250, 250, 0);
    border: none;
  }
}

.el-form-item ::-webkit-input-placeholder {
  color: #fff;
}

.flex {
  display: flex;
}

.hy {
  font-size: 24px;
  color: white;
  margin: 0 auto;
  width: 96px;
  /* padding: 10px 30px; */
  padding: 10px 0;
  border-bottom: 2px solid rgba(58, 98, 215, 1);
}

.logo {
  width: 100%;
}

.box {
  width: 300px;
  text-align: center;
  height: 360px;
  margin: 0 auto;
  margin-top: calc((100vh - 360px) / 2);
}

.login {
  left: 0px;
  background-image: url("../../assets/bxImg/login/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 0px;
  right: 0;
  width: 100%;
  position: fixed;
  height: 100vh;
  line-height: 20px;
  background-color: rgba(58, 98, 215, 1);
  text-align: center;

}</style>